<template>
  <div class="lamp-table">
    <slot></slot>
    <el-pagination
        v-if="pagination.total"
        class="beam-pagination"
        background
        :current-page="pagination.page"
        :page-size="pagination.size"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "baseTable",
  data() {
    return {};
  },
  props: {
    pagination: {
      type: Object,
      default() {
        return {
          size: 10,
          page: 1,
          total: 0,
        };
      },
    },
  },
  mounted() {

  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("currentChange", val);
    },
  },
};
</script>

<style scoped lang="scss">
.lamp-table {
  position: relative;

  :deep(.el-table) {
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;

    --el-table-current-row-bg-color: #D0EBFB;
    --el-table-row-hover-bg-color: #D0EBFB;
    --el-table-tr-bg-color: #F5FBFE;
    --el-fill-color-lighter: #fff;
    --el-table-border-color: #E2F9FC;
    --el-table-text-color: #366;

    .el-table__border-left-patch,
    .el-table__inner-wrapper:before {
      background-color: #DCE7EA;
    }
  }

  :deep(.el-table--border) {
    .el-table__inner-wrapper:after {
      background-color: transparent !important;
    }
  }

}

.beam-pagination {
  //position: absolute;
  //bottom: 20px;
  margin-top: 16px;

  :deep(.el-pager) {
    li {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.9);
      background-color: transparent;
      border: 1px solid #d2d0db;

      &:not(.is-disabled).is-active {
        background-color: transparent;
        border-color: #5b42ff;
        color: rgba(0, 0, 0, 0.9);
        font-weight: normal;
      }

      &:not(.is-disabled):hover {
        color: #5b42ff;
      }
    }
  }

  :deep(.el-pagination__sizes) {
    margin-left: 16px;
    margin-right: 0;

    .el-select .el-input {
      width: 100px;
    }
  }
}
</style>

